import React, {useState} from 'react'

export default function StateFn() {
  // useState的作用是在函数组件中使用state，state变量在变化时，页面也会更新
  const [count, setCount] = useState(0)
  // 1.声明了一个state变量，名字叫count
  // 2.声明了一个修改count的函数，名字叫setCount
  // 3.给count赋初始值0
  // 0是函数的参数，返回值是一个数组
  const [food, setFood] = useState('rice')
  const [hobby, setHobby] = useState([1,2,3,4])
  const changeHobby = ()=> {
    let arr = [...hobby]
    arr.push('a')
    // 整理好数据后，通过setXXX更新数据
    setHobby(arr)
  }
  return (
    <div>
      <p>点击次数：{count}</p>
      <button onClick={()=>setCount(count+1)}>click</button>
      <p>中午吃啥？{food}</p>
      <button onClick={()=>setFood('luoxihun')}>吃罗xihun</button>
      {
        hobby.map((item, index)=> {
          return (
            <div key={index}>{item}</div>
          )
        })
      }
      <button onClick={()=>changeHobby()}>加1</button>
    </div>
  )
}
